<template>
  <div class="w-full h-full relative">
    <LeftNav />
    <div class="right-main">
      <router-view></router-view>
    </div>

    <div class="avatar-box">
      <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="userStore.avatar" class="user-avatar" alt="" />
          <el-icon><caret-bottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <router-link to="/newProfile">
              <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
            </router-link>
            <el-dropdown-item command="logout">
              <span>{{ $t('navbar.logout') }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup lang="ts">
import LeftNav from './leftNav/index.vue';
import {customDetail} from "@/api/customerInfo";
import {customerDetail} from "@/views/customerInformation/customerService";
import {useRoute} from "vue-router";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
const route = useRoute();

const logout = async () => {
  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await userStore.logout()
  location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
}

// 定义Command方法对象 通过key直接调用方法
const commandMap: {[key: string]: any} = {
  logout
};

const handleCommand = (command: string) => {
  // 判断是否存在该方法
  if (commandMap[command]) {
    commandMap[command]();
  }
}

watch(() => route.query.customId, (val: any) => {
  if (val) {
    customDetail(val).then((res) => {
      customerDetail.value = res.data;
    })
  }
}, {deep: true, immediate: true})
</script>

<style scoped lang="scss">
.right-main {
  position: absolute;
  top: 40px;
  left: 490px;
  width: calc(100% - 700px);
  height: calc(100% - 60px);
  overflow: auto;
}

.avatar-box {
  position: absolute;
  top: 10px;
  right: 50px;
  height: 70px;
  line-height: 70px;

  .avatar-wrapper {
    position: relative;

    .user-avatar {
      cursor: pointer;
      width: 32px;
      height: 32px;
      border-radius: 32px;
      margin-top: 15px;
    }

    i {
      cursor: pointer;
      position: absolute;
      right: -20px;
      top: 25px;
      font-size: 12px;
    }
  }
}
</style>
